<template>
    <div class="box">
        <el-card style="max-width: 100%">
            <template #header>
            <div class="header">
                <h3>商家注册</h3>
                <el-link @click="this.$router.push('/adminLogin')">管理员登录</el-link>
            </div>
                
            </template>
            <el-form ref="refLogin" style="max-width: 600px" :model="businessOnly" :rules="rules" class="demo-ruleForm"
                label-width="100px">
                <el-form-item label="商家账号" prop="account">
                    <el-input v-model="businessOnly.account" />
                </el-form-item>
                <el-form-item label="商家密码" prop="password">
                    <el-input v-model="businessOnly.password" />
                </el-form-item>
                <el-form-item>
                    <el-space :size="170">
                        <el-button type="primary" @click="businessLogin()">登录</el-button>
                        <el-link @click="this.$router.push('/busRegist')">没有帐号，点击注册</el-link>
                    </el-space>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { businessLoginApi } from "@/api/business.js";
export default {
    data() {
        return {
            businessOnly: {
                account: '',
                password: ''
            },
            refLogin: "",
            rules: {
                account: { required: true, message: '请输入账号', trigger: 'blur' },
                password: { required: true, message: '请输入密码', trigger: 'blur' },
            }
        }
    },
    methods: {
        businessLogin() {
            // 提交数据之前，需要对表单进行统一的校验，只有所有必填项都填写了，才能正常的提交
            this.$refs.refLogin.validate(valid => {
                if (valid) {
                    businessLoginApi(this.businessOnly).then(resp => {
                        if (resp.data != null) {
                            // 响应成功后提示信息，并跳页面
                            ElNotification({
                                title: '登录成功',
                                message: '快来管理你的店铺吧！',
                                type: 'success',
                            });
                            // 需要将商家信息存放到本地存储中
                            sessionStorage.setItem("business", JSON.stringify(resp.data));
                            sessionStorage.removeItem("admin");
                            // 跳转到登录页面
                            this.$router.push('/');
                            // 清空注册信息
                            this.businessOnly = {
                                account: '',
                                password: ''
                            };
                        } else {
                            ElNotification({
                                title: '登录失败',
                                message: '账号或密码输入错误',
                                type: 'error',
                            })
                        }
                    })
                } else {
                    ElNotification({
                        title: '登录失败',
                        message: '账号或密码不能为空',
                        type: 'error',
                    })
                }
            })
        }
    },

}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://www.rrppt.com/uploads/beijing/42583/img/picture.jpg);
    background-size: 100% 100%;
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-card {
    width: 500px;
    opacity: 0.7;
}
</style>